<template>
  <div class="cate">
    <h6>商品分类页面</h6>
    <div class="wrap">
      <ul class="nav">
        <li
          v-for="(item, index) in fenlei"
          :key="item._id"
          @click="change(index, item._id)"
          :class="{ bg: flag == index }"
        >
          {{ item.title }}
        </li>
      </ul>
    </div>

    <div>
      <ul class="con">
        <li v-for="item in list" :key="item._id" v-show="item.cid == currentid">
          <img :src="item.pic" alt="" />
          <p>{{ item.title }}</p>
        </li>
        <!-- 渲染所有的商品，但是 根据分类id对商品节点进行筛选 -->
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fenlei: [],
      //获取的导航上的数据
      list: [],
      //所有的商品数据
      flag: 0,
      //保存点击变色的下标

      currentid: "",
    };
  },
  mounted() {
    this.getcate();
    this.getlist();
  },
  //进入页面调用list和fenlie.json中的数据

  methods: {
    getcate() {
      this.$axios
        .get("fenlei.json")
        .then((res) => {
          console.log(res);
          this.fenlei = res.data.result;
        })
        .catch((err) => {});
    },
    getlist() {
      this.$axios.get("list.json").then((res) => {
        console.log(res);
        this.list = res.data.result;
      });
    },
    change(i, id) {
      this.flag = i;
      this.currentid = id;
    },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.cate {
  .wrap {
    width: 100%;
    overflow: scroll;
  }
  .nav {
    display: flex;
    // flex-wrap: ;
    height: 50px;
    li {
      width: 80px;
      flex-shrink: 0;
      //不缩小
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .bg {
    background: #ccc;
    color: #fff;
  }
}
.con {
  display: flex;
  flex-wrap: wrap;
  li {
    width: 50%;
    text-align: center;

    img {
      width: 80%;
    }
  }
}
</style>
